<template>
    <view class="container">
        <!-- 自定义导航区域开始 -->
        <TridentNavBar>
            <template #left>
                <!-- #ifdef MP-ALIPAY -->
                <i class="iconfont icon-zuojiantou" style="font-size: 36rpx;font-weight: bold;"></i>
                <!-- #else -->
                <i class="iconfont icon-zuojiantou" style="font-size: 36rpx;"></i>
                <!-- #endif -->
            </template>
            <template #default>好友详情</template>
            <template #right>
                <!-- #ifdef MP-ALIPAY -->
                <i @click="goto('/pagesFriend/information/index')" class="iconfont icon-gengduo" style="font-size: 36rpx;font-weight: bold;"></i>
                <!-- #else -->
                <i @click="goto('/pagesFriend/information/index')" class="iconfont icon-gengduo" style="font-size: 36rpx;"></i>
                <!-- #endif -->
            </template>
        </TridentNavBar>
        <!-- 自定义导航区域结束 -->


        <template v-if="friend">
            <!-- 信息区域开始 -->
            <view class="info-wrap">
                <view class="left-box">
                    <image
                        :src="friend?.info.avatar_url ? global.FILE_DOMAIN + friend?.info.avatar_url : '/static/images/default_avatar.png'"
                    />
                </view>

                <view class="middle-box">
                    <view class="username-panel">
                        <span>{{friend?.info.username}}</span>
                        <i class="iconfont icon-nan" v-if="friend?.info.gender == 1"></i>
                        <i class="iconfont icon-nv" v-else></i>
                    </view>
                    <view class="nick">昵称：{{friend?.info.nick}}</view>
                    <view class="nick">电话：{{friend?.info.mobile}}</view>
                    <view class="region">地区：{{ friend.info.region }}</view>
                </view>

                <!-- 星标区域开始 -->
                <view class="right-box">
                    <i class="iconfont icon-shoucang" v-if="information?.is_asterisk == '1'" @click="handleEditAsterisk('0')"></i>
                    <i class="iconfont icon-shoucang1" v-else @click="handleEditAsterisk('1')"></i>
                </view>
            </view>
            <!-- 信息区域结束 -->

            <!-- 面板栏区域开始 -->
            <view class="panel-wrap">
                <template v-for="(item, index) in panels" :key="index">
                    <!-- 设置别名 -->
                    <view @click="handleShowEditAlias">
                        <TridentCellItem :item="item" :value="item.value" v-if="index == 0" is-link/>
                    </view>

                    <view v-if="index > 0 && item.url" @click="goto(item.url)">
                        <TridentCellItem :item="item" :is_arrows="item.is_arrows"/>
                    </view>
                </template>

                <!-- 拉黑 -->
                <view class="operate-item">
                    <view class="left">拉黑</view>
                    <view class="right">
                        <fui-switch
                            @change="handleBlacklist"
                            :color="global.THEME_COLOR"
                            :scaleRatio="0.6"
                            :checked="isBlacklist"
                        >
                            <text class="fui-switch--text">{{isBlacklist?'ON':'OFF'}}</text>
                        </fui-switch>
                    </view>
                </view>
            </view>
            <!-- 面板栏区域结束 -->

            <!-- 操作区域开始 -->
            <view class="opt-wrap">
                <view class="item-box" @click="goto('/pages/chat/index?is_open=1&mode=1&id=' + friend?.id)">
                    <i class="iconfont icon-liaotian"></i>
                    <text>发消息</text>
                </view>

                <!-- 按钮区域 -->
                <TridentButton text="删除好友" bgColor="#FF976A" @handleClick="handleRemoveFriend"/>
            </view>
            <!-- 操作区域结束 -->
        </template>

        <!-- 编辑别名弹层开始 -->
        <uni-popup
            ref="popupAliasRef"
            type="bottom"
            background-color="#fff"
            :mask-click="false"
        >
            <view class="popup-wrap">
                <view class="title-box">
                    <text>编辑别名</text>
                    <i class="iconfont icon-guanbi" @click="handleClosePopup"></i>
                </view>
                <view class="input-box">
                    <uni-forms label-width="100">
                        <uni-forms-item label="好友别名">
                            <uni-easyinput type="text" :primaryColor="global.THEME_COLOR" v-model="aliasName" placeholder="请输入别名" />
                        </uni-forms-item>
                    </uni-forms>
                </view>
                <TridentButton @handleClick="handleEditAlias"/>
            </view>
        </uni-popup>
        <!-- 编辑别名弹层结束 -->
    </view>
</template>

<script setup lang="ts">
import { reqBlacklistFriendAPI, reqDeleteFriendAPI, reqEditFriendAPI, reqFriendDetailAPI } from '@/apis/friend'
import { useUserStore } from '@/stores'
import type { Alias, Friend, Information } from '@/types/friend'
import type { CellItem } from '@/types/global'
import { inject, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { goto } from '@/utils/tools'


// --------------- 定义全局变量开始 ---------------
// 全局属性
const global: any = inject('global')

// 用户存储
const userStore = useUserStore()

// 单元格
const panels = ref<CellItem[]>([])

// 骨架屏
const isSkeleton = ref<boolean>(false)

// 获取页面参数
const query = defineProps({
    "id": {
        type: String,
        default: '0'
    }
})
// --------------- 定义全局变量结束 ---------------


// 挂载页面完成
onShow(async () => {
    await getFriendInfo()

    // 筛选好友别名
    let alias = ''
    friend.value?.alias.forEach(value => {
        if (value.uid != userStore.profile.user?.uid) {
            alias = value.name
        } else {
            myAlias.value = value
        }
    });

    aliasName.value = alias

    // 面板数据
    panels.value = [
        {
            title: '别名',
            value: aliasName.value,
            is_arrows: true
        },
        {
            title: '手机号',
            value: friend.value?.info.mobile,
            is_arrows: false
        },
        {
            title: '标签',
            value: '具体',
            url: '/pagesFriend/set_label/index'
        },
        {
            title: '描述',
            value: '查看',
            url: '/pagesFriend/set_label/index'
        },
        {
            title: '朋友权限'
        },
        {
            title: '朋友圈'
        },
        {
            title: '更多信息',
            url: '/pagesFriend/more_info/index'
        }
    ]
})

// --------------- 获取好友信息开始 ---------------
// 是否拉黑
const isBlacklist = ref<boolean>(false)

// 获取好友信息
const friend = ref<Friend>()

const information = ref<Information>()

// 获取好友信息
const getFriendInfo = async () => {
    isSkeleton.value = true
    const result = await reqFriendDetailAPI(query.id as never)
    friend.value = result.data
    isBlacklist.value = friend.value?.status == -1 ? true : false

    // 处理好友资料数据
    friend.value?.information.forEach(item => {
        if (item.uid != userStore.profile.user?.uid) {
            information.value = item
        }
    })

    isSkeleton.value = false
}
// --------------- 获取好友信息结束 ---------------



// --------------- 处理编辑别名开始 ---------------
// 控制显示弹层
const popupAliasRef = ref()

// 别名数组,用于请求提交
const aliasItems = ref<Alias[]>([])

// 显示别名
const aliasName = ref<string>('')

// 当前用户别名
const myAlias = ref<Alias>()

// 处理显示编辑别名弹层
const handleShowEditAlias = () => {
    popupAliasRef.value.open('bottom')
}

// 处理关闭别名弹层
const handleClosePopup = () => {
    popupAliasRef.value.close()
}

// 处理编辑别名弹层
const handleEditAlias = async () => {
    // 置空别名数据
    aliasItems.value = []

    // 追加好友别名数据
    aliasItems.value.push({
        uid: friend.value?.info.uid as never,
        name: aliasName.value
    })

    // 判断是否存在别人给我取了别名
    // 存在则追加到更新数据，反之则不追加
    if (myAlias.value?.uid) {
        aliasItems.value.push(myAlias.value)
    }

    // 请求修改别名
    await reqEditFriendAPI({id: friend.value?.id as never, alias: aliasItems.value})

    // 设置显示修改后的别名
    panels.value[0].value = aliasName.value

    uni.showToast({
        title: '编辑别名成功',
        duration: 1000
    })

    // 关闭弹层
    popupAliasRef.value.close()
}
// --------------- 处理编辑别名结束 ---------------



// --------------- 处理编辑星标开始 ---------------
// 延时器
const timer:any = ref(null)

// 星标、取消星标
const handleEditAsterisk = (type: string) => {
    // ------------------ 防抖处理 ------------------
	// 清除延时器
	clearTimeout(timer.value)
	// 重新启动延时器
	timer.value = setTimeout(async() => {
		await reqEditFriendAPI({id: query.id as never, uid: friend.value?.info.uid, is_asterisk: type})

        if (information.value?.is_asterisk) {
            information.value.is_asterisk = type
        }
        if (type == '1') {
            uni.showToast({
                title: '星标成功',
                duration: 1000
            })
        } else {
            uni.showToast({
                title: '取消星标成功',
                duration: 1000
            })
        }
	}, 500)
}
// --------------- 处理编辑星标结束 ---------------



// --------------- 处理删除好友开始 ---------------
const handleRemoveFriend = () => {
    uni.showModal({
	    content: '确定要删除吗?',
        confirmColor: global.THEME_COLOR,
	    success: async (res) => {
	        if (res.confirm) {
                await reqDeleteFriendAPI(friend.value?.id + '')

                uni.showToast({
                    title: '删除成功',
                    duration: 1000
                })

                // 跳转首页
                setTimeout(() => {
            		uni.switchTab({ url: '/' })
            	}, 1500)
	        }
	    }
	})
}
// --------------- 处理删除好友结束 ---------------



// --------------- 处理拉黑好友开始 ---------------
const handleBlacklist = async (event: any) => {
    const result = await reqBlacklistFriendAPI({
        ids: friend.value?.id + '',
        status: event.detail.value ? -1 : 1
    })
    isBlacklist.value = event.detail.value

    uni.showToast({
        title: result.message,
        duration: 1000
    })

    // 跳转首页
    setTimeout(() => {
        uni.switchTab({ url: '/' })
    }, 1500)
}
// --------------- 处理拉黑好友结束 ---------------
</script>

<style scoped lang="scss">
.container {
    .info-wrap {
        padding-top: 20rpx;
        display: flex;
        justify-content: space-between;
        padding-left: 20rpx;
        padding-right: 30rpx;
        .left-box {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 120rpx;
            height: 120rpx;
            border-radius: 10rpx;
            border: 2rpx solid #e3e2e2;
            image {
                width: 110rpx;
                height: 110rpx;
            }
        }
        .middle-box {
            flex: 1;
            padding-left: 20px;
            font-size: 14px;
            line-height: 26px;
            .username-panel {
                display: flex;
                align-items: center;

                font-size: 18px;
                color: #000;
                .icon-nan {
                    font-size: 18px;
                    color: #0747A6;
                    margin-left: 5px;
                }

                .icon-nv {
                    font-size: 18px;
                    color: #EE7458;
                    margin-left: 5px;
                }
            }
        }
        .right-box {
            .icon-shoucang {
                font-size: 24px;
                color: #FBC002;
            }
            .icon-shoucang1 {
                font-size: 24px;
                color: #e3e2e2;
            }
        }
    }

    .panel-wrap {
        margin-top: 20rpx;
        .operate-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            padding: 30rpx 30rpx;
            color: #000;
            border-top: 2rpx solid #f2f2f2;
            .left {
                font-size: 28rpx;
                flex: 1;
            }
            .right {
                width: 100rpx;
                display: flex;
                justify-content: flex-end;
            }
        }
    }

    // 操作区域开始
    .opt-wrap {
        margin-top: 10rpx;
        .item-box {
            height: 100rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff;
            border-bottom: 2rpx solid #e3e2e2;
            color: $uni-color-primary;
            font-weight: bold;
            font-size: 28rpx;
            &:last-child {
                border-bottom: none;
            }
            .iconfont {
                font-size: 24px;
                padding-right: 4px;
            }
        }
    }

    // 编辑别名弹层区域开始
    .popup-wrap {
        // 标题区域开始
        .title-box {
            display: flex;
            align-items: center;
            font-size: 32rpx;
            font-weight: bold;
            justify-content: center;
            height: 80rpx;
            color: $uni-color-primary;
            position: relative;
            border-bottom: 2rpx solid #e3e2e2;
            .icon-guanbi {
                font-size: 44rpx;
                color: #8e8c8c;
                position: absolute;
                right: 20rpx;
            }
        }

        // 输入框区域
        .input-box {
            padding: 30rpx 20rpx 0 20rpx;
        }
    }
}
</style>